<page-header-wrapper>
  <div nz-row [nzGutter]="32">
    <div nz-col nzMd="24" nzLg="8">
      <nz-card [nzTitle]="'app.sys.menu.list' | translate" [nzExtra]="extraTpl">
        <ng-template #extraTpl>
          <button (click)="add(null)" nz-button nzSize="small">{{ 'app.sys.menu.root' | translate }}</button>
        </ng-template>
        <div *ngIf="data.length === 0">{{ 'common.no-data' | translate }}</div>
        <div *ngIf="data.length > 0" scrollbar class="position-relative" style="height: 300px;">
          <nz-tree
            [nzData]="data"
            [nzDraggable]="true"
            (nzClick)="show($event)"
            (nzContextMenu)="showContextMenu($event, contextMenu)"
            [nzBeforeDrop]="move"
          >
          </nz-tree>
        </div>
      </nz-card>
    </div>
    <div nz-col nzMd="24" nzLg="16" *ngIf="op">
      <nz-card [nzTitle]="op === 'view' ? '查看 #' + item.id : item.id > 0 ? '编辑 #' + item.id : '新增'">
        <sv-container *ngIf="op === 'view'" col="2">
          <sv label="父编号">{{ item.parent_id }}</sv>
          <sv label="名称">{{ item.text }}</sv>
          <sv label="i18n">{{ item.i18n }}</sv>
          <sv label="菜单组"><span [innerHTML]="item.group | yn"></span></sv>
          <sv label="路由">{{ item.link }}</sv>
          <sv label="隐藏"><span [innerHTML]="item.hide | yn"></span></sv>
          <sv label="隐藏导航"><span [innerHTML]="item.hideInBreadcrumb | yn"></span></sv>
          <sv label="允许快捷"><span [innerHTML]="item.shortcut | yn"></span></sv>
          <sv label="ACL">{{ item.acl }}</sv>
          <sv label="复用"><span [innerHTML]="item.reuse | yn"></span></sv>
          <sv label="排序值" col="1">{{ item.sort }}</sv>
          <sv label="创建时间">{{ item.created | date }}</sv>
          <sv label="修改时间">{{ item.modified | date }}</sv>
        </sv-container>
        <sf *ngIf="op === 'edit'" [schema]="schema" [formData]="item" (formSubmit)="save($event)"></sf>
      </nz-card>
    </div>
  </div>
</page-header-wrapper>
<ng-template #contextMenu>
  <ul nz-menu nzInDropDown>
    <li nz-menu-item (click)="edit()">修改</li>
    <li nz-menu-item [nzDisabled]="delDisabled">
      <nz-popconfirm *ngIf="!delDisabled" [nzTitle]="delMsg" (nzOnConfirm)="del()">
        <div nz-popconfirm>删除</div>
      </nz-popconfirm>
      <div *ngIf="delDisabled">删除</div>
    </li>
    <li nz-menu-item (click)="add(item)">添加子项</li>
  </ul>
</ng-template>
